import React, { FC, useEffect } from 'react';
// import FullCalendar from '@fullcalendar/react'; // must go before plugins
// import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin!
// import interactionPlugin from '@fullcalendar/interaction'; // needed for dayClick
// import timeGridPlugin from '@fullcalendar/timegrid';
// import locale from '@fullcalendar/core/locales/zh-cn';

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';

const Fullcalendar: FC = () => {
  const handleDateClick: any = (arg) => {
    console.log(arg);
  };

  const renderEventContent = (eventInfo) => {
    return (
      <>
        <b>{eventInfo.timeText}</b>
        <i>{eventInfo.event.title}</i>
      </>
    );
  };

  useEffect(() => {
    const main = document.getElementById('fullC_main');
    if (!main) return;
    let calendar = new Calendar(main, {
      plugins: [dayGridPlugin, timeGridPlugin, resourceTimelinePlugin],
      initialView: 'resourceTimeline',
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,resourceTimeline',
      },
      resources: [
        {
          id: '1',
          title: 'ababab',
        },
        {
          id: '2',
          title: 'asjdlskad',
        },
      ],
    });
    calendar.render();
    console.log(calendar);
  }, []);

  return (
    // <FullCalendar
    //   plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
    //   initialView="timeGridWeek"
    //   weekends={true} // 显示周末
    //   events={[
    //     { title: 'event 1', date: '2023-03-19' },
    //     { title: 'event 2', date: '2023-03-20' },
    //   ]}
    //   dateClick={handleDateClick}
    //   eventContent={renderEventContent} // 用于设置日历中注入的自定义内容
    //   headerToolbar={
    //     {
    //       // left: 'prev,next today',
    //       // center: 'title',
    //       // right: 'dayGridMonth,timeGridWeek,timeGridDay',
    //     }
    //   }
    //   locale={locale}
    //   editable={true}
    // />
    <div id="fullC_main"></div>
  );
};

export default Fullcalendar;
